<template>
  <div class="page">
    <div class="login-bg">
      <div class="login-logo">
        <img src="../assets/img/login.jpeg" />
      </div>
      <div class="form itemBox">
        <div class="item">
          <div class="L"><img src="../assets/img/icon4.png" /></div>
          <div class="R">
            <input
              name=""
              v-model="username"
              type="text"
              id="loginTelphone"
              placeholder="请输入手机号"
            />
          </div>
        </div>
        <div class="item">
          <div class="L"><img src="../assets/img/icon5.png" /></div>
          <div class="R">
            <input
              name=""
              v-model="password"
              :type="ishowPaw ? 'text' : 'password'"
              id="loginPassword"
              placeholder="请输入密码"
            />
            <van-icon
              class="psw-icon"
              :name="ishowPaw ? 'eye-o' : 'closed-eye'"
              @click="switchClick()"
            />
          </div>
        </div>
        <div class="item2">
          <input
            name=""
            type="button"
            class="btn"
            id="loginInput"
            value="登录"
            @click="subLogin"
          />
        </div>
        <div class="item3">
          <input
            name=""
            type="button"
            class="btn"
            value="注册"
            @click="goRegister"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import axios from "axios";
const router = useRouter();
const username = ref("");
const password = ref("");
const ishowPaw = ref(false);
const switchClick = () => {
  ishowPaw.value = !ishowPaw.value;
};
const goRegister = () => {
  router.replace("/register");
};
const subLogin = () => {
  if (!username.value) {
    showToast("请输入手机号");
    return;
  }
  if (!password.value) {
    showToast("请输入密码");
    return;
  }
  axios({
    url: "https://www.fastmock.site/mock/19e0bcc189f92dbee2f430b58363a785/h5/login",
    method: "get",
    params: {
      username: username.value,
      password: password.value,
    },
  }).then((res) => {
    console.log(res, "返回信息·");
    localStorage.setItem("h5_token", res.data.data.username);
    router.back();
  });
};
onMounted(() => {
  console.log("mounted");
  console.log(router);
});
</script>
<style scoped lang="less">
.page {
  width: 100%;
  min-height: 100vh;
}
.login-logo {
  width: 100%;
  min-height: 280px;
  img {
    width: 100%;
  }
}
.form {
  margin: 0 40px 30px;
}

.itemBox {
  overflow: hidden;
  padding-bottom: 0;
}
.itemBox .item {
  border-bottom: 1px solid #cdcdcd;
  color: #a7a7a7;
  height: 40px;
  line-height: 40px;
  margin-bottom: 15px;
  display: flex;
}
.itemBox .item .L {
  float: left;
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.itemBox .item .L img {
  display: block;
  width: 20px;
  margin: 10px;
}
.itemBox .item .R {
  display: flex;
  align-items: center;
  flex: 1;
}
.itemBox .item .R input {
  width: 90%;
  background: none;
  height: 40px;
  line-height: 40px;
  border: 0;
  outline: none;
  letter-spacing: 1px;
  font-size: 14px;
}
.itemBox .item .C {
  display: flex;
  align-items: center;
  flex: 1;
}
.itemBox .item .C input {
  width: 90%;
  background: none;
  height: 40px;
  line-height: 40px;
  border: 0;
  outline: none;
  letter-spacing: 1px;
  font-size: 14px;
}
.itemBox .item .yzm {
  float: right;
}
.itemBox .item .yzm img {
  display: block;
  height: 38px;
}

.itemBox .item2 {
  /* height: 42px; */
  overflow: hidden;
  margin-bottom: 10px;
  margin-top: 40px;
}
.itemBox .item2 .btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #3278f9;
  color: #fff;
  border-radius: 6px;
  outline: none;
  border: 1px solid #3278f9;
  letter-spacing: 2px;
  cursor: pointer;
  font-size: 12px;
}
.itemBox .item3 {
  /* height: 42px; */
  overflow: hidden;
}
.itemBox .item3 .btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #fff;
  color: #3278f9;
  border-radius: 6px;
  outline: none;
  border: 1px solid #3278f9;
  letter-spacing: 2px;
  cursor: pointer;
  font-size: 12px;
}

.txtBox_3 {
  overflow: hidden;
}
.txtBox_3 span {
  display: block;
  color: #3278f9;
  text-align: center;
  letter-spacing: 1px;
  font-size: 12px;
}
.get-code-btn {
  width: 104px;
  background-color: #12b7f5;
  color: #fff;
  height: 30px;
  line-height: 30px;
  padding: 0px 16px;
  display: block;
  text-align: center;
  font-size: 14px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  border: 0;
  outline: 0;
}
.get-code-btn::after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: 0;
  right: 0;
}
.psw-icon {
  font-size: 16px;
}
</style>
